<template>
  <div class="home">
    <Header head-title="检测报告查询" go-back="true"></Header>
    <section class="Select fontsMin Test">
        <p class="">您还未绑定健康卡，绑定健康卡检查结果一键查询</p>
        <p @click="gotoBind()" class="activecolor">去绑定 ></p>
    </section>
    <section class="group Select fonts TestCon">
        <p>选择健康卡</p>
        <el-select v-model="value" clearable placeholder="选择查询的健康卡" class="SeleHos">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </section>
    <section class="group Select fonts TestCon">
        <p>选择就诊医院</p>
        <el-select v-model="valueH" clearable placeholder="选择就诊医院" class="SeleHos">
            <el-option v-for="item in optionsH" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </section>
    <section class="group Select fonts TestCon">
        <p>选择就诊人</p>
        <el-select v-model="valueR" clearable placeholder="选择就诊人" class="SeleHos">
            <el-option v-for="item in optionsR" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </section>
    <section class="group Select fonts TestCon">
        <p>按时间选择</p>
    </section>
    <section class="Select group">
        <el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }">
        </el-time-select>
        <p class="fonts TestTime">至</p>
        <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', minTime: startTime }">
        </el-time-select>
    </section>
    <section class="group">
        <el-button type="primary" class="Login" @click="TestSearchResult()">确认查询</el-button>
    </section>

  </div>
</template>

<script>
import Header from '../../../components/Header'

export default {
  data () {
    return {
      activeName: 'first',
      value: '',
      options: [{
        value: '1',
        label: '8000292929292922'
      }, {
        value: '2',
        label: '102002399485323'
      }, {
        value: '3',
        label: '20309580943286095'
      }, {
        value: '4',
        label: '340985456456456456'
      }, {
        value: '5',
        label: '465769760680'
      }],
      valueR: '',
      optionsR: [{
        value: '11',
        label: '成吉思汗'
      }, {
        value: '22',
        label: '陈园园'
      }, {
        value: '33',
        label: '刘邦'
      }, {
        value: '44',
        label: '李逵'
      }, {
        value: '55',
        label: '特朗普'
      }],
      valueH: '',
      optionsH: [{
        value: '11',
        label: '平顶山市妇幼保健院'
      }, {
        value: '22',
        label: '平顶山市第一人民医院'
      }, {
        value: '33',
        label: '平顶山市第二人民医院'
      }, {
        value: '44',
        label: '平煤集团总医院'
      }, {
        value: '55',
        label: '传染病医院'
      }],
      Select: -1,
      Equip: [
        { name: '处方号：11020299020', value: '待支付' },
        { name: '处方号：11020299020', value: '待支付' },
        { name: '处方号：11020299020', value: '待支付' }
      ],
      startTime: '',
      endTime: ''
    }
  },
  components: {
    Header
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    },
    Selected (index) {
      this.Select = index
    },
    //  绑定健康卡
    gotoBind () {
      this.$router.push({
        path: '/Bind'
      })
    },
    //  点击查询
    TestSearchResult () {
      this.$router.push({
        path: '/TestSearchResult'
      })
    }
  }
}
</script>

<style scoped>

.SeleHos {
    margin-right: 0.4rem;
}

</style>
